<template>
	<view v-if="component === 'view'" :class="'mui mui-button-base mui-ripple-base disabled-'+disabled+' '+mClass"
		@touchstart="touchstart" @mousedown="touchstart" @touchend="touchend" @mouseup="touchend"
		@touchcancel="touchend" @tap="tap" @longpress="longpress" :disabled="disabled" :style="mStyle">
		<slot />
		<!-- <mui-ripple-container class="_mui-ripple-container"></mui-ripple-container> -->
		<view class="mui-ripple-container"
			:style="'height:'+_rpcStyle.height+'px;width:'+_rpcStyle.width+'px;border-radius:'+_rpcStyle.borderRadius">
			<view v-for="item in _rippleList" :key="item.key" :data-key="item.key"
				:class="'mui-ripple '+item.rippleClass"
				:style="'width:'+_rpcStyle.radius+'px;height:'+_rpcStyle.radius+'px;top:'+(item.y)+'px;left:'+(item.x)+'px;'+(rippleColor ? 'background-color:' + rippleColor : '')" />
		</view>
	</view>
	<button v-else-if="component === 'button'" :app-parameter="openType === 'launchApp' ? appParameter : ''"
		:class="'mui mui-button-base mui-ripple-base disabled-'+disabled+' '+mClass" @touchstart="touchstart"
		@mousedown="touchstart" @touchend="touchend" @mouseup="touchend" @touchcancel="touchend" @tap="tap"
		@longpress="longpress" @getphonenumber="openType === 'getPhoneNumber' ? '_openTypeEvent' : '' "
		@getuserinfo="openType === 'getUserInfo' ? '_openTypeEvent' : '' "
		@opensetting="openType === 'openSetting' ? '_openTypeEvent' : '' "
		@contact="openType === 'contact' ? '_openTypeEvent' : '' "
		@launchapp="openType === 'launchApp' ? '_openTypeEvent' : '' " :disabled="disabled" :form-type="formType"
		:hover-class="hoverClass" :hover-stop-propagation="hoverStopPropagation" :hover-start-time="hoverStartTime"
		:hover-stay-time="hoverStayTime" :lang="lang" :open-type="openType"
		:session-from="openType === 'contact' ? sessionFrom : ''"
		:send-message-title="openType === 'contact' ? sendMessageTitle : ''"
		:send-message-path="openType === 'contact' ? sendMessagePath : ''"
		:send-message-img="openType === 'contact' ? sendMessageImg : ''"
		:show-message-card="openType === 'contact' ? showMessageCard : ''" :style="mStyle" size="mini">
		<slot />
		<!-- <mui-ripple-container class="_mui-ripple-container"></mui-ripple-container> -->
		<view class="mui-ripple-container"
			:style="'height:'+_rpcStyle.height+'px;width:'+_rpcStyle.width+'px;border-radius:'+_rpcStyle.borderRadius">
			<view v-for="item in _rippleList" :key="item.key" :data-key="item.key"
				:class="'mui-ripple '+item.rippleClass"
				:style="'width:'+_rpcStyle.radius+'px;height:'+_rpcStyle.radius+'px;top:'+item.y+'px;left:'+item.x+'px;'+(rippleColor ? 'background-color:' + rippleColor : '')" />
		</view>
	</button>
</template>

<script>
	var openTypeMap = {
		contact: 'contact',
		getPhoneNumber: 'getphonenumber',
		getUserInfo: 'getuserinfo',
		openSetting: 'opensetting',
		launchApp: 'launchapp'
	};
	export default {
		name: "mui-button-base",
		data() {
			return {
				_rippleList: [],
				_rpcStyle: {
					top: 0,
					left: 0,
					width: 0,
					height: 0,
					borderRadius: 0,
					radius: 0,
					centerRippleX: 0,
					centerRippleY: 0,
				},
			};
		},
		behaviors: ['uni://form-field-button'],
		props: {
			mClass: {
				type: String,
				default: ''
			},
			mStyle: {
				type: String,
				default: ''
			},
			disableRipple: {
				type: Boolean,
				default: false
			},
			centerRipple: {
				type: Boolean,
				default: false
			},
			rippleColor: {
				type: String,
				default: ''
			},
			appParameter: {
				type: String,
				default: ''
			},
			component: {
				type: String,
				default: 'view'
			},
			disabled: {
				type: Boolean,
				default: false
			},
			formType: {
				type: String,
				default: ''
			},
			hoverClass: {
				type: String,
				default: ''
			},
			hoverStopPropagation: {
				type: Boolean,
				default: false
			},
			hoverStartTime: {
				type: Number,
				default: 20
			},
			hoverStayTime: {
				type: Number,
				default: 70
			},
			lang: {
				type: String,
				default: 'en'
			},
			openType: {
				type: String,
				default: ''
			},
			sessionFrom: {
				type: String,
				default: ''
			},
			sendMessageTitle: {
				type: String,
				default: ''
			},
			sendMessagePath: {
				type: String,
				default: ''
			},
			sendMessageImg: {
				type: String,
				default: ''
			},
			showMessageCard: {
				type: String,
				default: ''
			}
		},
		methods: {
			touchstart(e) {
				//初始化点击位置
				var selectQuery = uni.createSelectorQuery().in(this);
				var _this = this;
				selectQuery.select('.mui-button-base').fields({
					rect: true,
					size: true,
					computedStyle: ['border-radius']
				}, function(res) {
					var top = res.top.toFixed(2);
					var left = res.left.toFixed(2);
					var width = res.width.toFixed(2)
					var height = res.height.toFixed(2)
					var borderRadius = res['border-radius']
					var radius = Math.max(width, height)
					var centerRippleX = (width / 2) - (radius / 2)
					var centerRippleY = (height / 2) - (radius / 2)
					_this.$data._rpcStyle.top = top;
					_this.$data._rpcStyle.left = left;
					_this.$data._rpcStyle.width = width;
					_this.$data._rpcStyle.height = height;
					_this.$data._rpcStyle.borderRadius = borderRadius;
					_this.$data._rpcStyle.radius = radius;
					_this.$data._rpcStyle.centerRippleX = centerRippleX;
					_this.$data._rpcStyle.centerRippleY = centerRippleY;

				}).exec();
				// console.log(e);
			},
			touchend(e) {
				this.generateRipple(e, 'ripple-end', 200)
			},
			tap(e) {
				this.generateRipple(e, 'ripple-tap', 800)
			},
			longpress(e) {
				this.generateRipple(e, 'ripple-longpress', 600)

			},
			generateRipple(e, rippleClass, timeout) {
				var x, y;
				var key = this.$data._rippleList.length;
				if (this.centerRipple) {
					x = this._rpcStyle.centerRippleX;
					y = this._rpcStyle.centerRippleY;
				} else {
					var point = this.getTouchPoint(e);
					//通过偏移量计算出显示动画的中心点
					x = point.x - this._rpcStyle.left - (this._rpcStyle.radius / 2);
					y = point.y - this._rpcStyle.top - (this._rpcStyle.radius / 2);
				}
				this.$data._rippleList.push({
					key: key,
					x: x,
					y: y,
					rippleClass: rippleClass,
				})
				var _this = this;
				setTimeout(function() {
					_this.$data._rippleList = _this.$data._rippleList.filter(function(item) {
						return item.key !== key;
					})
				}, timeout);
			},
			getTouchPoint(e) {
				if (!e) {
					return {
						x: 0,
						y: 0
					}
				}
				if (e.touches && e.touches[0]) {
					return {
						x: e.touches[0].pageX,
						y: e.touches[0].pageY
					}
				}
				if (e.changedTouches && e.changedTouches[0]) {
					return {
						x: e.changedTouches[0].pageX,
						y: e.changedTouches[0].pageY
					}
				}
				return {
					x: e.clientX || 0,
					y: e.clientY || 0
				}
			},
		},
		options: {
			// virtualHost: true,
			pureDataPattern: /^_pure/,
			styleIsolation: 'apply-shared'
		}
	}
</script>

<style>

</style>